<template>
  <div class="navi-container">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" @click="selectFeature(item)">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['feature-selected']);

const menuItems = [
  { id: 1, label: '数据查询', component: 'Content1' },
  { id: 2, label: '功能二', component: 'Content2' },
  // 新增 mqttClient 菜单项
  { id: 3, label: 'mqttClient', component: 'Mqtt' }
];

const selectFeature = (item) => {
  emit('feature-selected', item.component);
};
</script>

<style scoped>
.navi-container {
  width: 10vw;
  flex-shrink: 0;
  background-color: #f5f5f5;
  height: 100vh;
  padding: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

li:hover {
  background-color: #e0e0e0;
}
</style>